<template>
  <div>
    <h3>可添加</h3>
    <el-select
      v-model="value"
      multiple
      filterable
      allow-create
      default-first-option
      placeholder="请选择文章标签">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>


    <el-collapse style="margin-top: 5px;">
      <el-collapse-item title="代码">
<pre><code class="html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">el-select</span>
    <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span>
    <span class="hljs-attr">multiple</span>
    <span class="hljs-attr">filterable</span>
    <span class="hljs-attr">allow-create</span>
    <span class="hljs-attr">default-first-option</span>
    <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"请选择文章标签"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">el-option</span>
      <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in options"</span>
      <span class="hljs-attr">:key</span>=<span class="hljs-string">"item.value"</span>
      <span class="hljs-attr">:label</span>=<span class="hljs-string">"item.label"</span>
      <span class="hljs-attr">:value</span>=<span class="hljs-string">"item.value"</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">el-option</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">el-select</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">options</span>: [{
          <span class="hljs-attr">value</span>: <span class="hljs-string">'HTML'</span>,
          <span class="hljs-attr">label</span>: <span class="hljs-string">'HTML'</span>
        }, {
          <span class="hljs-attr">value</span>: <span class="hljs-string">'CSS'</span>,
          <span class="hljs-attr">label</span>: <span class="hljs-string">'CSS'</span>
        }, {
          <span class="hljs-attr">value</span>: <span class="hljs-string">'JavaScript'</span>,
          <span class="hljs-attr">label</span>: <span class="hljs-string">'JavaScript'</span>
        }],
        <span class="hljs-attr">value</span>: []
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>

    export default {
        data() {
            return {
                options: [{
                    value: 'HTML',
                    label: 'HTML'
                }, {
                    value: 'CSS',
                    label: 'CSS'
                }, {
                    value: 'JavaScript',
                    label: 'JavaScript'
                }],
                value: []
            }
        }
    }
</script>
